<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../img/icon.png"/>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/order.css">
    <link rel="stylesheet" href="../img/font/iconfont.css">
</head>
<body>
    <div class="header-container"></div>
    <div class="HUA">
        <ul>
            <li>
                <i class="iconfont icon-shoucang"></i>
                <a href="#">我的收藏</a>
            </li>
            <li>
                <i class="iconfont icon-wodezuji"></i>
                <a href="#">我的足迹</a>
            </li>
            <li>
                <i class="iconfont icon-saoyisao"></i>
                <a href="#">下载APP</a>
            </li>
            <li>
                <i class="iconfont icon-kefu"></i>
                <a href="#">联系客服</a>
            </li>
            <li>
                <i class="iconfont icon-huidaodingbuxianxing "></i>
                <a href="#">回到顶部</a>
            </li>
        </ul>
    </div>
    <main>
        <div class="logo">
            <div class="all">
                <div class="all-left">
                    <a href="../index.html"><img src="../img/logo.png" ></a>
                </div>
                <div class="all-center">
                    <div class="box1">
                        <ul>
                            <li><a href="#">商品</a></li>
                            <li><a href="#">店铺</a></li>
                        </ul>
                        <input type="text" placeholder="请输入您要搜索的关键字" class="clearInput"/>
                        <button class="search">搜索</button>
                    </div>
                    <ul class="search-ul"></ul>
                    <div class="box2">
                        <ul>
                            <li><a href="#">电动牙刷</a></li>
                            <li><a href="#">冰白葡萄酒女士</a></li>
                            <li><a href="#">红酒</a></li>
                            <li><a href="#">冰糖</a></li>
                            <li><a href="#">内裤</a></li>
                            <li><a href="#">风扇</a></li>
                            <li><a href="#">面条机</a></li>
                            <li><a href="#">卫生巾透气</a></li>
                            <li><a href="#">面条锅</a></li>
                        </ul>
                    </div>
                </div>
                <div class="all-right">
                    <span>0</span>
                    <a href="./cart.html"><i class="iconfont icon-gouwuche"></i>我的购物车</a>
                </div>
            </div>
        </div>
        <div class="my-order">
            <div class="my-order-con">
                <div class="moL">
                    <div class="l1"><a href="../index.html">首页</a></div>
                    <div class="l2">
                        <h4>订单中心</h4>
                        <ul>
                            <li class="my"><a href="#">我的订单</a></li>
                            <li><a href="#">售后服务</a></li>
                            <li><a href="#">订单评论</a></li>
                        </ul>
                    </div>
                    <div class="l3">
                        <h4>我的资产</h4>
                        <ul>
                            <li><a href="#">余额</a></li>
                            <li><a href="#">美容券</a></li>
                        </ul>
                    </div>
                    <div class="l4">
                        <h4>我的服务</h4>
                        <ul>
                            <li><a href="#">我的收藏</a></li>
                            <li><a href="#">我的足迹</a></li>
                            <li><a href="#">我的消息</a></li>
                        </ul>
                    </div>
                    <div class="l5">
                        <h4>账户设置</h4>
                        <ul>
                            <li><a href="#">收货地址</a></li>
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">实名认证</a></li>
                            <li><a href="#">密码修改</a></li>
                            <li><a href="#">支付密码修改</a></li>
                        </ul>
                    </div>
                </div>
                <div class="moR">
                    <div class="moR-1">
                        <div class="m1-1"><h4>我的订单</h4></div>
                        <div class="m1-2">
                            <ul>
                                <li><a href="#">全部订单</a></li>
                                <li><a href="#">待支付</a></li>
                                <li><a href="#">待发货</a></li>
                                <li><a href="#">待收货</a></li>
                                <li><a href="#">已完成</a></li>
                                <li><a href="#">待评价</a></li>
                            </ul>      
                            <div class="search">
                                <input type="text" placeholder="搜索订单号" class="clearInput"/>
                                <button>搜索</button>
                            </div>                    
                        </div>
                        <div class="m1-3">
                            <ul>
                                <li><a href="#">近三个月订单</a><img src="../img/xia.png" alt=""></li>
                                <li><a href="#">订单详情</a></li>
                                <li><a href="#">订单金额</a></li>
                                <li><a href="#">收货人</a></li>
                                <li><a href="#">状态</a></li>
                                <li><a href="#">操作</a></li>
                            </ul>
                        </div>
                        <div class="m1-4">
                            <p>你还没有相关订单</p>
                            <button>去挑好物</button>
                        </div>
                    </div>
                    <div class="moR-2"></div>
                </div>
            </div>
        </div>
    </main>
    <div class="footer-container"></div>
    <script src="../libs/jquery.min.js"></script>
    <script>
    $('.header-container').load('./header.html')
    $('.footer-container').load('./footer.html')  
    </script>

    <script src="../js/jsonp.js"></script>
    <!-- 这是搜索框 -->
    <script>
        let container = document.querySelector('.search-ul')
        let search = document.querySelector('.search-input')
        function fn(res){
            container.innerHTML = ''
            res.s.forEach((item)=>{
                container.innerHTML += `
                    <li>${item}</li>
                `
            })
        }
        
        //当咱们输入内容的时候触发这个事件，发送请求返回内容
        onkeyup = ()=>{
            container.innerHTML = ''
            let wd = search.value
            if(wd.trim().length == 0){
                container.innerHTML = ''
                return
            }
            jsonp(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=fn&wd=${wd}`)
        }
    </script>
</body>
</html>